<script setup lang="ts">
import { ref } from 'vue'
import NoList from '@/components/NoList.vue'
import { busListStore } from '@/stores/modules/bus'
import { onLoad } from '@dcloudio/uni-app'
import type { ApplyBusiness } from '@/types/business'
import { getSearchBusUserListAPI } from '@/api/business'
import { getBarcodeByDateAPI } from '@/api/code'

// tabs 数据
const orderTabs = ref([
  { orderState: 0, title: '配送列表' },
  { orderState: 1, title: '销售列表' },
])
const busStore = busListStore()
const range = ref(['', ''])
// 获取页面参数
const query = defineProps<{
  type: string
}>()

// 高亮下标
const activeIndex = ref(orderTabs.value.findIndex((v) => v.orderState === Number(query.type)))

const activePanel = ref([])

// 搜索
const form = ref({
  name:'',
  actBusId: busStore.busList[0].id,
  bindBusId: '',
  barcodeType: '',
  agentName: '',
  searchDateStart: '',
  searchDateEnd: '',
})
const dataRange = ref('')
const onDateChange = (e: any) => {
  dataRange.value = e.join('至')
  form.value.searchDateStart = e[0]
  form.value.searchDateEnd = e[1]
}

const onSubmit = () => {
  if (form.value.searchDateEnd && form.value.searchDateStart) {
    if (activeIndex.value == 0 || (activeIndex.value == 1 && form.value.bindBusId)) {
      getBarcodeByDate()
    } else {
      uni.showToast({ icon: 'none', title: '请输入搜索信息！' })
    }
  } else {
    uni.showToast({ icon: 'none', title: '请输入搜索日期' })
  }
}

// 获取商家列表
const companyList = ref<ApplyBusiness[]>([])
const getCompanyList = async () => {
  const res = await getSearchBusUserListAPI()
  companyList.value = res.data
  companyList.value.map(item => {
    item.text = item.name
    item.value = item.id
  })
}

// 按日期获取码列表
const dataList = ref<any>()
const getBarcodeByDate = async () => {
  let urlStr = `?bindBusId=${form.value.bindBusId}&barcodeType=2&actBusId=${form.value.actBusId}&searchDateStart=${form.value.searchDateStart}&searchDateEnd=${form.value.searchDateEnd}`
  if (activeIndex.value == 1) {
    urlStr = urlStr + `&bindBusId=${form.value.bindBusId}`
  }
  const res = await getBarcodeByDateAPI(urlStr)
  dataList.value = res.data
  if (res.code == '1') {
    uni.showToast({ icon: 'none', title: res.msg})
  } else {
    uni.showToast({ icon: 'none', title: '获取成功'})
  }
}

const myCollapse = ref()
const handleOpenChange = (index: any) => {
  setTimeout(() => {
    myCollapse.value.children[index].init()
  }, 20)
}

// 选择承销商
const onChangeType = (e: any) => {
  form.value.bindBusId = e
}

onLoad(() => {
  getCompanyList()
})
</script>

<template>
  <view class="viewport">
    <!-- tabs -->
    <view class="tabs">
      <text
        class="item"
        v-for="(item, index) in orderTabs"
        :key="item.title"
        @tap="activeIndex = index"
      >
        {{ item.title }}
      </text>
      <!-- 游标 -->
      <view class="cursor" :style="{ left: activeIndex * 50 + 10 + '%' }"></view>
    </view>
    <view class="top_total">
      <view class="label"><text>总数:</text>89850</view>
    </view>
    <!-- 表单内容 -->
    <view class="form">
      <view class="form-content">
        <view class="form-item" style="border: none;">
          <text class="label" style="padding-top: 5px;">承销商名称：</text>
          <uni-data-select
            class="picker"
            :value="form?.bindBusId"
            :localdata="companyList"
            :map="{text:'name',value:'id'}"
            @change="onChangeType"
          >
            <view v-if="form?.name">{{ form?.name }}</view>
            <view class="placeholder" v-else>请选择</view>
          </uni-data-select>
        </view>
        <view class="form-item">
          <text class="label">日期</text>
          <uni-datetime-picker
            v-model="range"
            type="daterange"
            rangeSeparator="至"
            @change="onDateChange"
          >
            <view v-if="dataRange">{{ dataRange }}</view>
            <view class="placeholder" v-else>请选择日期</view>
          </uni-datetime-picker>
        </view>
        <!-- 提交按钮 -->
        <button class="form-button" @tap="onSubmit">搜索条码</button>
      </view>
    </view>
    <view class="list"  v-if="dataList">
      <view class="code_item">
        <view class="mouth_item">
          <text>{{ dataList.dateInfo }}</text>
          <text>数量：{{ dataList.num }}</text>
        </view>
        <view class="mouth content">
          <uni-collapse v-model="activePanel" accordion>
            <uni-collapse-item
              :open="secItem.open"
              v-for="(secItem, index1) in dataList.scanDateGroupList"
              :key="secItem.id"
              @change="handleOpenChange(index1)"
            >
              <template v-slot:title>
                <div class="day_title">
                  <text>{{ secItem.dateGroup }}</text>
                  <text>数量：{{ secItem.num }}</text>
                </div>
              </template>
              <view class="day day_item">
                <navigator
                  :url="'/pages/codeDetail/codeDetail?id=' + itemBus.id"
                  class="content_item"
                  v-for="(itemBus, index3) in secItem.scanList"
                  :key="index3"
                >
                  <view class="business_name">{{ itemBus.actBusName }}</view>
                  <view class="business_code">{{ itemBus.scanCode }}</view>
                  <view class="business_time">{{ itemBus.activateTime }}</view>
                  <view class="handle"
                    ><uni-icons type="right" size="20" color="#ddd"></uni-icons
                  ></view>
                </navigator>
              </view>
            </uni-collapse-item>
          </uni-collapse>
        </view>
      </view>
    </view>
    <no-list v-else></no-list>
  </view>
</template>
<style lang="scss">
page {
  height: 100%;
  overflow: hidden;
  background-color: #f4f4f4;
}
.viewport {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.form {
  height: auto;
  padding-bottom: 10px;
}

.top_total {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  padding: 10px 20px 0;
  .label {
    width: 50%;
    margin: 5px 0;
    text {
      display: inline-block;
      width: 150rpx;
      color: #666;
    }
  }
}

.list {
  padding-bottom: 30px;
}
::v-deep .is-open + .uni-collapse-item__wrap {
  height: auto !important;
}

.code_item {
  font-size: 26rpx;
  background-color: #fff;
  .mouth_item,
  .day_title {
    display: flex;
    justify-content: space-between;
    padding: 12px 20px;
  }
  .mouth {
    border: 1px solid #eee;
  }
  .mouth_item {
    background: #27ba9b;
    color: #fff;
  }
  .day_title {
    background-color: #d0f3eb;
  }
  .content_item {
    display: flex;
    justify-content: space-between;
    padding: 10px 20px;
  }
  .content_item {
    border-top: 1px solid #eee;
    .business_name {
      width: 80px;
    }
    .business_code {
      width: 100px;
    }
    .business_time {
      width: 80px;
    }
    .handle {
      width: 25px;
    }
  }
}

// tabs
.tabs {
  display: flex;
  justify-content: space-around;
  line-height: 60rpx;
  margin: 0 10rpx;
  background-color: #fff;
  box-shadow: 0 4rpx 6rpx rgba(240, 240, 240, 0.6);
  position: relative;
  z-index: 9;

  .item {
    flex: 1;
    text-align: center;
    padding: 20rpx;
    font-size: 28rpx;
    color: #262626;
  }

  .cursor {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 30%;
    height: 6rpx;
    padding: 0 50rpx;
    background-color: #27ba9b;
    /* 过渡效果 */
    transition: all 0.4s;
  }
}
</style>
